<template>
	<view>
		<view class="zc-top">
			<view class="zc-top-text">
				<text>账户总资产</text>
				<text></text>
			</view>
			<view class="zc-top-total">
				<text>6753.1982</text>
				<text class="zc-top-total_USDT">USDT</text>
			</view>
			<view class="zc-top-money">
				<view class="zc-top-money-left">
					<text class="zc-top-money_1">可用资产</text>
					<text class="zc-top-money_2">65.23HNW</text>
					<text class="zc-top-money_2">24.23USDT</text>
				</view>
				<view class="zc-top-money-right">
					<text class="zc-top-money_1">不可用资产(锁仓)</text>
					<text class="zc-top-money_2">65.23HNW</text>
				</view>
			</view>
			<view class="zc-top-btn">
				<button :plain="true">转账</button>
				<button :plain="true">闪兑</button>
				<button :plain="true">充值</button>
				<button :plain="true">提币</button>
			</view>
		</view>
		<view class="zc-b-list">
			<view class="zc-b-flex flex">
				<view class="cmd-left">
					<image src="../../static/image/icon/hnw-logo@2x.png" mode=""></image>
					<text><text class="HNW">HNW</text></text>
				</view>
				<view class="cmd-right">
					<view class="cmd-right_1 flex">
						<view class="cmd-right_Left cmd-out"><text>可用</text></view>
						<view class="cmd-right_right">
							<text class="cmd-right_right-top">73453.198872</text>
							<text>≈23488723423USDT</text>
						</view>
					</view>
					<view class="cmd-right_2 flex">
						<view class="cmd-right_Left cmd-out"><text>锁仓</text></view>
						<view class="cmd-right_right"><text class="cmd-right_right-top">73453.198872</text></view>
					</view>
				</view>
			</view>
		</view>
		<view class="zc-b-list">
			<view class="zc-b-flex flex">
				<view class="cmd-left">
					<image src="../../static/image/icon/usdt.png" mode=""></image>
					<text><text class="HNW">HNW</text></text>
				</view>
				<view class="cmd-right">
					<view class="cmd-right_2 flex">
						<view class="cmd-right_Left cmd-out"><text>锁仓</text></view>
						<view class="cmd-right_right"><text class="cmd-right_right-top">73453.198872</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	}
};
</script>

<style lang="scss">
.zc-top {
	color: #ffffff;
	padding: 0 50rpx;
	overflow: hidden;
	background: linear-gradient(to bottom, #0a1c57, #183e8f);
}
.zc-top-text {
	font-size: 26rpx;
	text-align: left;
	// padding-left: 50rpx;
	margin-top: 50rpx;
}
.zc-top-total {
	font-size: 52rpx;
	text-align: center;
	margin: 40rpx 0;
	.zc-top-total_USDT {
		font-size: 22rpx;
		margin-left: 10rpx;
	}
}
.zc-top-money {
	display: flex;
	justify-content: space-between;
	text {
		display: block;
	}
	.zc-top-money_1 {
		font-size: 22rpx;
		margin-bottom: 25rpx;
	}
	.zc-top-money_2 {
		font-size: 24rpx;
		margin-bottom: 10rpx;
	}
	.zc-top-money-left {
		border-right: 1px solid #ffffff;
	}
	.zc-top-money-right {
		text-align: right;
	}
	.zc-top-money-left,
	.zc-top-money-right {
		flex: 1;
	}
}
.zc-top-btn {
	display: flex;
	justify-content: space-between;
	margin: 80rpx 0 40rpx 0;
	button {
		color: #ffffff;
		font-size: 26rpx;
		padding: 0 40rpx;
		border: 1px solid #ffffff;
	}
}
.zc-b-list {
	margin: 18rpx 28rpx;
	background-color: #ffffff;
	padding: 40rpx;
	.zc-b-flex {
	}
	.cmd-left {
		display: flex;
		align-items: center;
		// width: 356rpx;
		image {
			width: 52rpx;
			height: 52rpx;
			margin-right: 20rpx;
		}
		.imgs {
			width: 72rpx;
			height: 72rpx;
		}
		.USDT {
			font-size: 20rpx;
		}
		.HNW {
			font-size: 30rpx;
			font-weight: bold;
		}
		.duihuan1 {
			color: #333333;
			font-size: 28rpx;
		}
		.duihuan2 {
			color: #999999;
			font-size: 22rpx;
		}
	}
	.cmd-right {
		flex: 1;
		margin-left: 100rpx;
		.cmd-right_1 {
			align-items: center;
			border-bottom: 1px solid #dceffc;
			padding-bottom: 15rpx;
		}
		.cmd-right_2 {
			padding-top: 15rpx;
		}
		.cmd-right_Left {
			font-size: 22rpx;
			align-items: center;
		}
		.cmd-out:before {
			content: '';
			width: 8px;
			height: 8px;
			line-height: 8px;
			color: #d77f7f;
			margin-right: 15rpx;
			display: inline-block;
			border-radius: 4px;
			background-color: #d77f7f;
		}
		.cmd-right_right {
			text {
				font-size: 22rpx;
				display: block;
			}
			.cmd-right_right-top {
				font-size: 28rpx;
			}
		}
	}
}
</style>
